<template>
	<view class="bgColor_order">
		<view class="cardList" v-for="(item, index) in cardListArray" :key="index">
			<view class="list_name_hader">
				<view class="title">订单编号：{{item.ordernumber}}</view>
				<view class="details">
					{{item.createtime | createtime}}
				</view>
			</view>
			<view class="list_concent">
				<!-- 0：港澳居民来往内地通行证；1：台湾居民来往大陆通行证；2：往来港澳通行证；3：护照 -->
				<view class="list_concent_item">证件类型：{{item.documenttype | documenttype}}</view>
				<view class="list_concent_item">证件号：{{item.identificationnumber}}</view>
				<view class="list_concent_item">预约密码：{{item.reservationpassword}}</view>
				<view :class="item.isappointmentsuccessful == '1' ? 'jfcgColor' : 'list_concent_item'">
					预约状态：{{item.isappointmentsuccessful | isappointmentsuccessful}}</view>
				<view class="ispay">
					支付状态：<view :class="item.ispay == '1' ? 'list_concent_item' : 'ddjfColor'">
						{{item.ispay | ispay}}
					</view>
				</view>
				<view class="list_concent_item" v-if="item.staste == '预约成功'">预约成功时间：2022-02-23</view>

			</view>
		</view>
		<!-- 	<view class="addButton_order">
			添加新订单
		</view> -->
	</view>
</template>

<script>
	import {
		getOrderDetails
	} from "@/api/user.js"
	export default {
		data() {
			return {
				cardListArray: [
					// {
					// 	title: "7239475886",
					// 	zjhm: 'C233565',
					// 	zjhmlx: '往来港澳通行证',
					// 	yymi: "ASD133",
					// 	staste: '预约成功',
					// 	time: '2022-05-23'
					// },
					// {
					// 	title: "7239475886",
					// 	zjhm: 'C233565',
					// 	zjhmlx: '往来港澳通行证',
					// 	bgColor: "#FFFFFF",
					// 	staste: '缴费成功',
					// 	yymi: "ASD133",
					// 	time: '2022-05-23'
					// },
					// {
					// 	title: "7239475886",
					// 	zjhmlx: '往来港澳通行证',
					// 	zjhm: 'C233565',
					// 	bgColor: "#FFFFFF",
					// 	yymi: "ASD133",
					// 	staste: '等待缴费',
					// 	time: '2022-05-23'
					// }

				]
			};
		},
		filters: {
			createtime(value) {
				//时间戳转换
				var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let Y = date.getFullYear() + '-';
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return Y + M + D;
			},
			documenttype(val) {
				// 0：港澳居民来往内地通行证；1：台湾居民来往大陆通行证；2：往来港澳通行证；3：护照
				if (val == 0) {
					return '港澳居民来往内地通行证'
				} else if (val == 1) {
					return '台湾居民来往大陆通行证'
				} else if (val == 2) {
					return '往来港澳通行证'
				} else if (val == 3) {
					return '护照'
				}
			},
			isappointmentsuccessful(val) {
				if (val == 0) {
					return '预约中'
				} else if (val == 1) {
					return '预约成功'
				}
			},
			ispay(val) {
				if (val == 0) {
					return '未支付'
				} else if (val == 1) {
					return '已支付'
				}
			}
		},
		onLoad(options) {
			if (options.order_id) {
				let order_id = options.order_id;
				this.getOrderDetails(order_id)
			}
		},
		methods: {
			getOrderDetails(order_id) {
				let that = this;
				let data = {
					// __token__: '2f8672f4e545c3212489e0cbad6447df',
					order_id: order_id
				}
				getOrderDetails(data).then(res => {
					if (res.code == "success" && res.data) {
						let list = [];
						list.push(res.data);
						that.cardListArray = list;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			},
			detailsClick() {
				console.log(6666)
				uni.navigateTo({
					url: '/pages/order/orderDetails'
				});
			}
		}
	}
</script>

<style lang="less">
	.bgColor_order {
		background-color: #EEEEEE;
		min-height: 100vh;
		padding: 20rpx 32rpx;
		// .addButton_order{
		// 	margin: 99rpx 85rpx;
		// 	height: 88rpx;
		// 	text-align: center;
		// 	line-height: 88rpx;
		// 	background: linear-gradient(90deg, #00D2FF, #3A7BD5);
		// 	border-radius: 12rpx;
		// 	font-size: 32rpx;
		// 	font-family: Adobe Heiti Std;
		// 	font-weight: normal;
		// 	color: #FFFFFF;
		// }

		.cardList {
			// height: 234rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding-bottom: 20rpx;
			margin-bottom: 21rpx;

			.list_concent {
				margin-left: 19rpx;
				margin-top: 25rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;

				.jfcgColor {
					color: #18FF64;
					// margin-bottom: 20rpx;
				}
				.ispay{
					height: 56rpx;
					// margin-bottom: 20rpx;
					color: #A1A1A1;
					display: flex;
					flex-direction: row;
					align-items: center;
				}

				.list_concent_item {
					// margin-bottom: 20rpx;
					color: #A1A1A1;
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 56rpx;

					.delbutton {
						margin-right: 20rpx;
						width: 164rpx;
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
						background: linear-gradient(90deg, #FF0060, #D53A3A);
						border-radius: 28rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}

					.xgbutton {
						margin-right: 20rpx;
						width: 164rpx;
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
						background: linear-gradient(90deg, #00D2FF, #3A7BD5);
						border-radius: 28rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}
				}

				.ddjfColor {
					// margin-bottom: 20rpx;
					color: #FF1818;
				}
			}

			.list_name_hader {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 79rpx;
				border-bottom: 1rpx solid #EEEEEE;

				.title {
					margin-left: 16rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #4D4D4D;
				}

				.details {
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #808080;
					margin-right: 19rpx;
				}
			}
		}
	}
</style>
